<template>
	<view class="tabs-list" :style="{'justify-content': justifyContent}">
		<block v-for="(item, index) in tabList" :key="index">
			<view class="tab-item" :style="{'width': boxWidth + 'rpx', 'height': boxHeight + 'rpx'}" 
			:key="index" @click="clickTab(item)"
			:class="defaultTab == item.id? 'selected-item' : ''">
				{{ item.name }}
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name:"tabs-list",
		data() {
			return {
				
			};
		},
		props: {
			tabList: Array,
			defaultTab: {
				type: [Number, String],
				default: 0
			},
			boxWidth: {
				type: [Number, String],
				default: 136
			},
			boxHeight: {
				type: [Number, String],
				default: 92
			},
			justifyContent: {
				type: String,
				default: 'space-between'
			}
		},
		methods: {
			clickTab(e){
				this.$emit('changeTab', e)
			}
		}
	}
</script>

<style scoped lang="scss">
.tabs-list{
	width: 100%;
	height: 120rpx;
	background-color: #FFF;
	z-index: 9;
	position: fixed;
	// #ifdef H5
	top: 44px;
	// #endif
	// #ifndef H5
	top: 0;
	// #endif
	left: 0;
	padding: 0 30rpx;
	display: flex;
	align-items: flex-end;
	font-size: 32rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #212121;
	.tab-item{
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 6rpx solid transparent;
	}
	.selected-item{
		border-bottom: 6rpx solid #3E3E3E;
	}
}
</style>